.d-flex{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.back-ground-color{
    height: 200px;
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: aquamarine
}

.container{
    /* display: flex; */
    height: 100vh;
    width: 100%;
    /* justify-content: center; */
    /* justify-items: center; */
    background: rgb(250, 247, 247);
}

.container-inner{
    padding:12px;
}

.headSpan{
    margin-top: 12px;
    width: 100%;
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
    
}



.tab-class span{
    position: relative;
    color:'gray'
}

.active{
    color: rgb(248, 112, 112);
  }
.tab-class:not(:first-child){
    position: relative;
    margin-left: 20px;
}

.tab-class:not(:last-child)::after{
    content: '';
    position: absolute;
    height: 13px;
        width: 1px;
        top: 7px;
        right:-12px;
    background-color: gray;
}

.middleLine{
margin: 0 20px;
position: relative;
}
.middleLine::after{
    content: '';
position: absolute;
height: 13px;
    width: 1px;
    top: -5px;
background-color: gray;
}

.list-content{
    width: 100%;
}
.list-bottom{
    width: 50%;
 display: flex;
  /* justify-content: space-between; */
} 
.list-bottom >:not(:last-child){
    margin-right: 38px;
}

/* .list-bottom {
    display: flex; 
    gap: 12px; 
  } */

.small-letter{
    color: gray;
}

.middle-line{
    text-align: center;
}

.bottomLine{
    display: flex;
    justify-content: center;
    align-items: center;
}

.absoluteContent{
   position: absolute;
   width: auto;
   height: auto;
   border: 1px solid rgb(100, 89, 89);
   border-radius: 2px;
   background-color: rgb(250, 157, 192);

   left: 80px;
}

.tooltip {
    position: absolute;
    background: #333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    width: 200px;
  }
  
  .tooltip-arrow {
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 10px;
  }

  .footer{
    width: 100%;
    height: 60px;
    background-color: rgb(254, 214, 189);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 12px;
  }

  .desc-card{
    width: 92%;
    margin: 12px auto;
    height: 80px;
    padding: 12px;
    display: flex;
    justify-content: flex-start;
    justify-items: center;
word-wrap: break-word;
border: 1px solid rgb(249, 237, 179);
background-color: rgb(251, 248, 230);
  }

  .layout{
    height: calc(100vh - 45px);
    width: calc(100% - 24px);
    padding:0 12px 12px 12px;
    background-color: rgb(236, 234, 234);
    position: relative;
    overflow: auto;
 
  }
.head-nav{
    position: fixed;
    top: 20px;
    height: 80px;
    width: 100%;
    border: 1px solid rgb(248, 245, 202);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.nav-mask{
    height: 105px;
    background-color: rgb(236, 234, 234);
    position: fixed;
    width: 100%;
}
.head-nav span{
    display: block;
    height: 50px;
    width: auto;
    border: 1px solid rgb(246, 126, 51);
border-radius: 3%;
margin-left: 12px;
display: flex;
    justify-content: center;
    align-items: center;
}

  .layout-content{
    margin-top: 105px;
       width: 100%;
       height: 2000px;
       overflow: auto;
       background-color: var(--primary-color);
  }
  
  .calendar{
    width: 98%;
    padding: 12px;
    border: 1px solid rgb(250, 225, 111);
    height: 30%;
    background-color:rgb(253, 231, 136);
    position: relative;
}
.inner-calendar{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 12px;
    background-color:rgb(253, 231, 136);
}
.calendar-title{
 position: relative;
 overflow: hidden;
 text-overflow: ellipsis;
}
.down-calendar{
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.down-item{
     width:33%;
     display: flex;
     flex-direction: column;
}
.title-desc{display: flex;justify-content: flex-start;}
.title-desc :not(:last-child){
    margin-right: 12px;
}